{% extends "learning/base.html" %}

{% block title %}注册 · 高中数学助手{% endblock %}

{% block content %}
<section class="card" style="max-width:560px;margin:3rem auto;padding:2.5rem;">
    <div style="text-align:center;margin-bottom:2rem;">
        <div style="width:64px;height:64px;margin:0 auto 1rem;border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--success),var(--success-600));display:grid;place-items:center;font-size:2rem;color:white;box-shadow:var(--shadow-lg);">
            ✨
        </div>
        <h2 style="margin:0 0 0.5rem 0;font-size:1.75rem;font-weight:700;">创建新账号</h2>
        <p style="margin:0;color:var(--text-secondary);">
            开启你的智能学习之旅
        </p>
    </div>

    <form method="post" novalidate>
        {% csrf_token %}
        
        {% if form.non_field_errors %}
            <div class="message message-error" style="margin-bottom:1.25rem;">
                {% for error in form.non_field_errors %}
                    {{ error }}
                {% endfor %}
            </div>
        {% endif %}

        {% for field in form %}
            <div style="margin-bottom:1.25rem;">
                <label for="{{ field.id_for_label }}" style="margin-bottom:0.5rem;">
                    {{ field.label }}
                    {% if field.field.required %}
                        <span style="color:var(--danger);margin-left:0.25rem;">*</span>
                    {% endif %}
                </label>
                {{ field }}
                {% if field.help_text %}
                    <small style="display:block;color:var(--text-secondary);margin-top:0.5rem;font-size:0.875rem;line-height:1.5;">
                        {{ field.help_text }}
                    </small>
                {% endif %}
                {% for error in field.errors %}
                    <small style="color:var(--danger);display:block;margin-top:0.5rem;font-size:0.875rem;">
                        {{ error }}
                    </small>
                {% endfor %}
            </div>
        {% endfor %}

        <button class="button" type="submit" style="width:100%;padding:0.875rem;font-size:1rem;margin-top:0.5rem;">
            注册并开始学习
        </button>
    </form>

    <div style="margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-subtle);text-align:center;">
        <p style="margin:0;color:var(--text-secondary);font-size:0.9375rem;">
            已经有账号？
            <a href="{% url 'accounts:login' %}" style="color:var(--accent);font-weight:600;text-decoration:none;">
                直接登录
            </a>
        </p>
    </div>
</section>

<div style="max-width:560px;margin:0 auto 3rem;">
    <div class="card" style="background:var(--success-light);border-color:rgba(34,197,94,0.3);">
        <h4 style="margin:0 0 0.75rem 0;color:var(--success);display:flex;align-items:center;gap:0.5rem;">
            <span>💡</span>
            <span>注册提示</span>
        </h4>
        <ul style="margin:0;padding-left:1.25rem;color:var(--text-primary);line-height:1.7;font-size:0.9375rem;">
            <li>注册时请填写真实姓名，方便老师识别</li>
            <li>设置一个安全的密码，建议使用 6 位以上字符</li>
            <li>记得填写老师的用户名，这样老师才能看到你的错题</li>
            <li>注册完成后即可开始记录错题和使用 AI 助教</li>
        </ul>
    </div>
</div>
{% endblock %}
